.player {
  max-width: 768px;
  margin: 0 auto;
  margin-top: 50px;
  padding: 80px 300px 20px 40px;
  position: relative;

  .cover {
    position: absolute;
    top: 50%;
    right: 25px;
    margin-top: -125px;
    border-radius: 125px;
    width: 250px;
    height: 250px;
    transform: rotate(0deg);
  }
  @-webkit-keyframes imgrotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .play {
    -webkit-animation: imgrotate 15s linear infinite;
  }
  .title {
    font-size: 20px;
    padding: 10px 0;
  }
  .singer {
    color: #ccc;
    font-size: 14px;
    margin-bottom: 20px;
  }
  .volume-control  {
    display: flex;
    align-items: center;
  }
  .surplus {
    font-size: 14px;
    color: #ccc;
    margin-right: 20px;
  }
  .volume {
    cursor: pointer;
    display: flex;
    align-items: center;

    >div {
      width: 0;
      transition: width .3s;
      margin-left: 10px;
    }
    &:hover>div{
      width: 80px;
    }
  }
  .music-control {
    display: flex;
    align-items: center;

    div {
      padding: 10px 10px;
      margin: 0 10px;
      cursor: pointer;
      background-color: #efefef;
    }
  }
  .progress-box {
    margin: 20px 0;
  }
}
